<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Material Admin Documentation</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">

    </head>
    <body>

        <div class="jumbotron text-center">
            <h2>Material Admin Documentation</h2>
            <br/>
            <a href="https://wrapbootstrap.com/theme/material-admin-responsive-angularjs-WB011H985" class="btn btn-default">Demo</a>
            <a href="https://wrapbootstrap.com/theme/material-admin-responsive-angularjs-WB011H985" class="btn btn-default">Purchase</a>
        </div>

            <div class="content">
                <div class="c-menu" data-spy="affix" data-offset-top="182">
                    <ul>
                        <li><a href="#about">About Material Admin</a></li>
                        <li><a href="#project_structure">Project Structure</a></li>
                        <li><a href="#node-npm">NodeJs and NPM</a></li>
                        <li><a href="#installation">Installation</a></li>
                        <li><a href="#gruntjs">GruntJs</a></li>
                        <li><a href="#change-log">Change Log</a></li>
                        <li><a href="#upgrade-notes">Upgrading from 1.5.1</a></li>
                    </ul>
                </div>
                <div class="c-body">
                    
                    <!-- About -->
                    <div class="card" id="about">
                        <h2>About Material Admin</h2>

                        <br>

                        <p>Material Admin is a Google Material Design inspired powerful-lightweight fully responsive retina display compatible admin template based on latest Bootstrap 3. Material Admin comes with both jQuery and AngularJs versions.</p>
                        <p>Unless like other admin templates, all the plugin used in Material Admin are completely customized to match the Material Design.</p>

                        <div class="text-center">
                            <img src="img/cover.jpg" class="img-responsive" alt="" style="display: inline-block;">
                        </div>
                    </div>

                    <i class="glyphicon glyphicon-circle-arrow-down card-step-ind"></i>

                    <!-- Projuct Structure -->
                    <div class="card" id="project_structure">
                        <h2>Project structure</h2>
                        
                        <br>
                        
                        <p>Toggle between tabs for both jQuery and AngularJs project structures</p>
                        
                        <br><br>
                        
                        <ul class="nav nav-tabs nav-justified" role="tablist">
                            <li class="active"><a href="#jquery" role="tab" data-toggle="tab"><strong>jQuery</strong></a></li>
                            <li><a href="#angular" role="tab" data-toggle="tab"><strong>AngularJs</strong></a></li>
                        </ul>

                        <br>

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="jquery">
<pre>
- css
  -- app.1.min.css
  -- app.2.min.css
  
- fonts
- img
- js
  -- flot-charts
  -- charts.js
  -- demo.js
  -- functions.js 
  
- less
  -- inc
  -- app.less
  
- media
- node_modules
- vendors
  -- bower_components
  
  gruntfile.js
  package.json
  index.html
  ...
</pre>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="angular">
<pre>
- css
  -- app.1.min.css
  -- app.2.min.css
  
- data
- fonts
- img
- js
  -- controller
  -- modules
  -- app.js
  -- config.js
  -- services.js
  -- template.js 
  
- less
  -- inc
  -- app.less
  
- media
- node_modules
- templates
- vendors
  -- bower_components

- views

  gruntfile.js
  package.json
  index.html  
  ...
</pre>
                        </div>
                    </div>

                    <br><br>

                    <h4>About CSS files </h4>

                    <br>

                    <p>All LESS files including third party's are compiled in to a single CSS file and, splitted in to 2 minified pieces in order to gain support for IE 9. In IE 9, a sheet may contain up to only 4095 selectors and anything above will be ignored.</p>

                    <p>Make sure to include both <code>app.min.1.css</code> and <code>app.min.2.css</code> in your project files in proper sequence.</p>

                </div>

                    <i class="glyphicon glyphicon-circle-arrow-down card-step-ind"></i>

                    <!-- NodeJs and NPM -->
                    <div class="card" id="node-npm">
                        <h2>NodeJs and NPM</h2>

                        <br>

                        <p>Material Admin comes with GruntJs for automated tasks and a complete set of third party dependencies. Source files of these dependencies are not included in your downloaded directory and in order to install them, you'll need to have NodeJs and NPM installed in your computer. Make sure to install this duo before your proceed anything with your new project.</p>

                        <br>

                        <p><strong><a href="https://nodejs.org/en/" target="_blank">NodeJs</a></strong></p>
                        <p><strong><a href="http://blog.npmjs.org/post/85484771375/how-to-install-npm" target="_blank">Installing NPM</a></strong></p>

                    </div>

                    <i class="glyphicon glyphicon-circle-arrow-down card-step-ind"></i>

                    <!-- Installation -->
                    <div class="card" id="installation">
                        <h2>Installation</h2>

                        <br>

                        <p>Make sure to install both NodeJs and NPM in your computer as mentioned in previous section, before you proceed anything in this section.</p>

                        <br>

                        <ol>
                            <li>Extract the file downloaded using any file archive utility software. </li>
                            <li>Copy all the files and folders from template directory to your project directory.</li>
                            <li>
                                Install all the NPM dependencies by firing the following command in your main project directory where you can find <code>package.json</code>
                                <pre>npm install</pre>
                            </li>
                            <li>That's it. Now you can start previewing Material Admin.</li>
                        </ol>

                        <br><br><br>

                        <h4>Useful Links</h4>

                        <br>

                        <a href="http://bower.io/#getting-started" target="_blank">Bower: Getting Started</a><br>
                        <a href="http://www.zell-weekeat.com/bower/">How to manage your frontend dependencies with Bower</a>

                    </div>

                    <i class="glyphicon glyphicon-circle-arrow-down card-step-ind"></i>

                    <!-- Configuring GruntJs -->
                    <div class="card" id="gruntjs">
                        <h2>GruntJs</h2>

                        <br>

                        <p><a href="http://gruntjs.com/" target="_blank">GruntJs</a> is a task-based command line build tool for JavaScript projects. It helps making most of our manual tasks to automate such as minifying, compiling, splitting etc. In Material Admin, GruntJs is been used for:</p>

                        <ol>
                            <li>Compiling LESS to CSS.</li>
                            <li>Splitting main CSS file to sub instances.</li>
                            <li>Minification of CSS and JS files</li>
                            <li>Template Caching (AngularJs)</li>
                        </ol>

                        <p>All the above tasks are added in <code>gruntfile.js</code> which is available in the main project folder. <code>gruntfile</code> just creates a basic grunt.js that you can fill in with tasks.</p>

                        <br><br>

                        <h4>Installing GruntJs</h4>

                        <br>

                        <p>GruntJs is available as a <a href="https://www.npmjs.com/package/grunt" target="_blank">NPM package</a> and already included in our main NPM dependency list in <code>package.json</code></p>
                        <p>Doing a simple:</p>

                        <pre>npm install</pre>

                        as mentioned in '<a href="#node-npm">NodeJs and NPM</a>', will install all the dependencies including GruntJs.

                        <br><br><br>

                        <h4>Before you make any changes...</h4>

                        <br>

                        <p>before you make any changes in <code>less</code> or <code>template</code> (Angularjs) directory files, make sure to run: </p>
                        <pre>grunt watch</pre>
                        <p><code>grunt watch</code> is a file watcher which will execute certain tasks when any given file changes. All less files and template files in angularjs variant should be watched in order to make changes in the output files (css and template.js).</p>

                        <br><br><br>

                        <h4>Useful Links</h4>

                        <br>

                        <a href="http://gruntjs.com/getting-started" target="_blank">GruntJs: Getting Started</a><br>
                        <a href="http://code.tutsplus.com/tutorials/meet-grunt-the-build-tool-for-javascript--net-24856" target="_blank">Meet Grunt: The Build Tool for JavaScript</a>

                    </div>

                    <i class="glyphicon glyphicon-circle-arrow-down card-step-ind"></i>

                    <!-- Change log-->
                    <div class="card" id="change-log">
                        <h2>Change Log</h2>

                        <br>

                        <p><i>Newly added</i></p>
                        <ul>
                            <li>Malihu Content Scroller plugin (Replacing Nicescroll)</li>
                            <li>Page Loader</li>
                            <li>Pre Loaders (preloaders.html)</li>
                            <li>3 level sub-menus in mainmenu</li>
                            <li>Custom headers</li>
                            <li>Description and Address in Typography (typography)</li>
                            <li>Basic Documentation</li>
                        </ul>

                        <p><i>Updated</i></p>
                        <ul>
                            <li>Bootstrap library</li>
                            <li>AngularJs library (AngularJs)</li>
                            <li>Top Search</li>
                            <li>Image icons to Font icons in top menu</li>
                            <li>New color scheme for Alerts (alerts.html)</li>
                        </ul>

                        <p><i>Fixed</i></p>
                        <ul>
                            <li>Color Picker display (AngularJs - form-components.html))</li>
                            <li>Href link new window in Summernote HTML Editor (jQuery - form-components.html)</li>
                            <li>Tooltip Position (components.html)</li>
                            <li>Dropdown Flipin animation in Safari browser (components.html)</li>
                            <li>Arrow key accessibility in Typeahead plugin (form-components.html)</li>
                            <li>Arrow key accessibility in Chosen plugin (form-components.html)</li>
                        </ul>

                        <p><i>Removed</i></p>
                        <ul>
                            <li>Nicescroll plugin</li>
                        </ul>


                    </div>

                    <i class="glyphicon glyphicon-circle-arrow-down card-step-ind"></i>

                    <!-- Upgrade Notes -->
                    <div class="card" id="upgrade-notes">
                        <h2>Upgrade Notes</h2>

                        <br>

                        <p>Those who upgrading from version 1.5.1 to this release, please follow the changes below.</p>


                        <br><br>

                        <h4>Replacing Custom Scrollbar</h4>

                        <br>

                        <p>
                            In this release, previously used <a href="http://areaaperta.com/nicescroll/" target="_blank">NiceScroll</a> custom scrollbar plugin has been replaced with
                            <a href="http://manos.malihu.gr/jquery-custom-content-scroller/" target="_blank">Malihu Content Scroller</a>.
                        </p>

                        <ol>
                            <li>
                                Copy Malihu Content Scroller plugin from newly downloaded Material Admin package to your project <code>vendors/bower_components/malihu-custom-scrollbar-plugin</code>.

                                <br><br>

                                Alternatively, you can install it from Bower.
                                <pre>bower install malihu-custom-scrollbar-plugin --save</pre>
                            </li>

                            <li>
                                Link CSS file
                                <pre>
    &lt;link href="vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet"&gt;</pre>
                            </li>

                            <li>
                                Link JS file and remove old Nicescroll reference.
                                <pre>
    &lt;script src="vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"&gt;&lt;/script&gt;</pre>
                            </li>

                            <li>
                                Initiate the plugin.

                                <br><br>

                                <ul class="nav nav-tabs nav-justified" role="tablist">
                                    <li class="active"><a href="#jquery-scrollbar" role="tab" data-toggle="tab"><strong>jQuery</strong></a></li>
                                    <li><a href="#angular-scrollbar" role="tab" data-toggle="tab"><strong>AngularJs</strong></a></li>
                                </ul>

                                <br><br>

                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="jquery-scrollbar">
                                        <p>Replace code in <code>js/functions.js</code> under comment 'Scrollbar' with</p>
<pre>
function scrollBar(selector, theme, mousewheelaxis) {
    $(selector).mCustomScrollbar({
        theme: theme,
        scrollInertia: 100,
        axis:'yx',
        mouseWheel: {
            enable: true,
            axis: mousewheelaxis,
            preventDefault: true
        }
    });
}

if (!$('html').hasClass('ismobile')) {
    //On Custom Class
    if ($('.c-overflow')[0]) {
        scrollBar('.c-overflow', 'minimal-dark', 'y');
    }
}
</pre>

                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="angular-scrollbar">
                                        <p>Replace code in <code>js/services.js</code> under comment 'Nice Scroll - Custom Scroll bars' with</p>
<pre>
.service('scrollService', function() {
    var ss = {};
    ss.malihuScroll = function scrollBar(selector, theme, mousewheelaxis) {
        $(selector).mCustomScrollbar({
            theme: theme,
            scrollInertia: 100,
            axis:'yx',
            mouseWheel: {
                enable: true,
                axis: mousewheelaxis,
                preventDefault: true
            }
        });
    }

    return ss;
})</pre>
                                    <br><br>
                                    <p>Replace code in <code>js/modules/ui.js</code> under comment 'NICE SCROLL' with</p>
<pre>
.directive('cOverflow', ['scrollService', function(scrollService){
    return {
        restrict: 'C',
        link: function(scope, element) {

            if (!$('html').hasClass('ismobile')) {
                scrollService.malihuScroll(element, 'minimal-dark', 'y');
            }
        }
    }
}])</pre>
                                    </div>
                                </div>
                            </li>
                        </ol>


                        <br><br>

                        <h4>Markup Changes</h4>

                        <br>

                        <ol class="ol-alt">
                            <!-- Header -->
                            <li>
                                <p><strong>Header</strong> - New release comes with support for custom header colors. An extra attribute is required in ordre to activate this feature.</p>

                                <i>Code before</i>
<pre>
&lt;header id="header"&gt;</pre>
                            <i>Code now</i>
<pre>
&lt;header id="header" class="clearfix" data-current-skin="blue"&gt;</pre>
                            </li>


                            <!-- Header Menu -->
                            <li>
                                <p><strong>Header Menu</strong> - Image icons to Font Icons.</p>
                                <i>Code before</i>
<pre>
&lt;li class="dropdown"&gt;
    &lt;a data-toggle="dropdown" class="tm-message" href=""&gt;&lt;i class="tmn-counts">6&lt;/i&gt;&lt;/a&gt;
    ... </pre>


                                <i>Code now</i>
<pre>
&lt;li class="dropdown"&gt;
    &lt;a data-toggle="dropdown" href=""&gt;
        &lt;i class="tm-icon zmdi zmdi-email"&gt;&lt;/i&gt;
        &lt;i class="tmn-counts">6&lt;/i&gt;
    &lt;/a&gt;
    ...</pre>


                            <!-- Header Search -->
                            <li>
                                <p><strong>Header Search</strong></p>

                                <i>Code before</i>

<pre>
&lt;div id="top-search-wrap"&gt;
    &lt;input type="text"&gt;
    &lt;i id="top-search-close">&times;&lt;/i&gt;
&lt;/div&gt;
</pre>
                            <i>Code now</i>
<pre>
&lt;div id="top-search-wrap"&gt;
    &lt;div class="tsw-inner"&gt;>
        &lt;i id="top-search-close" class="zmdi zmdi-arrow-left">&lt;/i&gt;
        &lt;input type="text"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                            </li>

                            <!-- Sidebar -->
                            <li>
                                <p><strong>Sidebars</strong> (Menu and Chat)</p>

                                <i>Code before</i>
<pre>
&lt;aside id="sidebar"&gt; <span class="text-muted">&lt;!-- or id="chat" for chat sidebar --&gt;</span>
    &lt;div class="sidebar-inner c-overflow"&gt;
        ...
</pre>
                            <i>Code now</i>
<pre>
&lt;aside id="sidebar" class="sidebar c-overflow"&gt; <span class="text-muted">&lt;!-- or id="chat" for chat sidebar --&gt;</span>
    ...
</pre>
                            </li>


                            <!-- Sidebar Profile Menu -->
                            <li>
                                <p><strong>Sidebar Profile Menu</strong></p>

                                <i>Code before</i>
<pre>
&lt;div class="profile-menu"&gt;
    &lt;a href=""&gt;
        &lt;div class="profile-pic"&gt;
            &lt;img src="img/profile-pics/1.jpg" alt=""&gt;
        &lt;/div&gt;

        &lt;div class="profile-info"&gt;
            Malinda Hollaway

            &lt;i class="zmdi zmdi-arrow-drop-down"&gt;&lt;/i&gt; <span class="text-muted">&lt;!-- this --&gt;</span>
        &lt;/div>
    &lt;/a&gt;
    ...
</pre>
                                <i>Code now</i>
<pre>
&lt;div class="profile-menu"&gt;
    &lt;a href=""&gt;
        &lt;div class="profile-pic"&gt;
            &lt;img src="img/profile-pics/1.jpg" alt=""&gt;
        &lt;/div&gt;

        &lt;div class="profile-info"&gt;
            Malinda Hollaway

            &lt;i class="zmdi zmdi-caret-down"&gt;&lt;/i&gt; <span class="text-muted">&lt;!-- this --&gt;</span>
        &lt;/div&gt;
    &lt;/a&gt;
    ...
</pre>
                            </li>


                            <!-- Floating form label -->
                            <li>
                                <p><strong>Floating form label</strong> (in form-elements.html and widgets.html)</p>

                                <i>Code before</i>
<pre>
&lt;div class="form-group fg-float"&gt;
    &lt;div class="fg-line"&gt;
        &lt;input type="text" class="input-sm form-control fg-input"&gt;
    &lt;/div&gt;
    &lt;label class="fg-label">Input Small&lt;/label&gt;
&lt;/div&gt;
</pre>

                                <i>Code now</i>
<pre>
&lt;div class="form-group fg-float"&gt;
    &lt;div class="fg-line"&gt;
        &lt;input type="text" class="input-sm form-control fg-input"&gt;
        &lt;label class="fg-label">Input Small&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                            </li>


                            <!-- Chosen library -->
                            <li>
                                <p><strong>Chosen library reference</strong> (in form-components.html) -  Now it's part of bower_components</p>

                                <i>Code before</i>
<pre>
<span class="text-muted">&lt;!-- css --&gt;</span>
&lt;link href="vendors/chosen_v1.4.2/chosen.min.css" rel="stylesheet">

<span class="text-muted">&lt;!-- js --&gt;</span>
&lt;script src="vendors/chosen_v1.4.2/chosen.jquery.min.js">&lt;/script&gt;
</pre>

                            <i>Code now</i>
<pre>
<span class="text-muted">&lt;!-- css --&gt;</span>
&lt;link href="vendors/bower_components/chosen/chosen.min.css" rel="stylesheet"&gt;

<span class="text-muted">&lt;!-- js --&gt;</span>
&lt;script src="vendors/bower_components/chosen/chosen.jquery.min.js">&lt;/script&gt;
</pre>
                            </li>

                            <!-- Page loading animation -->
                            <li>
                                <p><strong>Page loading animation</strong> - Add the codes below in all pages before closing <code>body</code> tag.</p>

<pre>
&lt;div class="page-loader"&gt;
    &lt;div class="preloader pls-blue"&gt;
        &lt;svg class="pl-circular" viewBox="25 25 50 50"&gt;
            &lt;circle class="plc-path" cx="50" cy="50" r="20" /&gt;
        &lt;/svg&gt;

        &lt;p>Please wait...&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                            </li>
                        </ol>


                    </div>

                    <i class="glyphicon glyphicon-circle-arrow-up card-step-ind"></i>
            </div>
            </div>
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>